﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../js/jq/jquery.lastest.js"></script>
    <script src="../../js/ko/knockout.lastest.js"></script>

    <style type="text/css">
        body
        {
            font-family: Helvetica, Arial;
            font-size: 12px;
        }

        input:not([type]), input[type=text], input[type=password], select
        {
            background-color: #FFFFCC;
            border: 1px solid gray;
            padding: 2px;
        }

        .codeRunner ul
        {
            list-style-type: none;
            margin: 1em 0;
            background-color: #cde;
            padding: 1em;
            border-radius: 0.5em;
        }

            .codeRunner ul li a
            {
                color: Gray;
                font-size: 90%;
                text-decoration: none;
            }

                .codeRunner ul li a:hover
                {
                    text-decoration: underline;
                }

        .codeRunner input:not([type]), input[type=text]
        {
            width: 30em;
        }

        .codeRunner input[disabled]
        {
            text-decoration: line-through;
            border-color: Silver;
            background-color: Silver;
        }

        .codeRunner textarea
        {
            width: 30em;
            height: 6em;
        }

        .codeRunner form
        {
            margin-top: 1em;
            margin-bottom: 1em;
        }
    </style>
    <script type="text/javascript">
        function Task(data) {
            this.title = ko.observable(data.title);
            this.isDone = ko.observable(data.isDone);
        }

        function TaskListViewModel() {
            //--------------------------------------------------------------------------------------------
            // Data
            //--------------------------------------------------------------------------------------------
            var self = this;
            self.tasks = ko.observableArray([]);
            self.newTaskText = ko.observable();
            self.incompleteTasks = ko.computed(function () {
                return ko.utils.arrayFilter(self.tasks(), function (task) { return !task.isDone() });
            });

            //--------------------------------------------------------------------------------------------
            // Operations
            //--------------------------------------------------------------------------------------------
            self.save = function () {
                var para = { action: 'saveTask', tasks: ko.toJSON(self.tasks) };
                var paraString = ko.toJSON(para);
                $.post("service/task.ashx",
                    para,
                    function (result) {
                        console.log(result);
                        alert(result.Message);
                    });
            }
            self.loadTask = function () {
                // Load initial state from server, convert it to Task instances, then populate self.tasks
                $.post("service/task.ashx",
                    { action: 'getTask' },
                    function (allData) {
                        //console.log('in-callback', allData);
                        var mappedTasks = $.map(allData, function (item) { return new Task(item) });
                        self.tasks(mappedTasks);
                    });
            }

            self.showInfo = function () {
                console.log("showInfo", ko.toJSON(self.tasks));
            };
            self.addTask = function () {
                self.tasks.push(new Task({ title: this.newTaskText() }));
                self.newTaskText("");
            };
            self.removeTask = function (task) { self.tasks.remove(task) };

            //--------------------------------------------------------------------------------------------
            // init
            //--------------------------------------------------------------------------------------------
            self.loadTask();
        }

        $(function () {
            // Activates knockout.js
            ko.applyBindings(new TaskListViewModel());
        });
    </script>
</head>
<body class="codeRunner">
    <h3>Tasks</h3>

    <form data-bind="submit: addTask">
        Add task:
        <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
        <button type="submit">Add</button>
    </form>

    <ul data-bind="foreach: tasks, visible: tasks().length > 0">
        <li>
            <input type="checkbox" data-bind="checked: isDone" />
            <input data-bind="value: title, disable: isDone" />
            <a href="#" data-bind="click: $parent.removeTask">Delete</a>
        </li>
    </ul>

    You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s)
    <span data-bind="visible: incompleteTasks().length == 0">- it's beer time!</span>


    <input type="hidden" name="tasks" data-bind="value: ko.toJSON(tasks)" />
    <button data-bind="click: showInfo">Show Info (json)</button>
    <button data-bind="click: save">Save</button>
</body>
</html>
